<template>
  <div class="app-container">
    <el-row>
      <el-col :span="15">
        <el-card style="margin: 0 20px">
          <el-form ref="form" :model="form" label-width="120px" style="padding-right: 20px">
            <el-form-item label="默认缓存路径">
              <el-input v-model="form.sourcePath" />
            </el-form-item>
            <el-form-item label="默认保存路径">
              <el-input v-model="form.targetPath" />
            </el-form-item>
            <el-form-item label="保存名称">
              <el-row>
                <el-col :span="10">
                  <el-input v-model="form.outputNameFormat" />
                </el-col>
              </el-row>
              <div style="margin-top: 5px; ">
                <div style="background: rgb(237 237 237 / 72%); line-height: 30px; color: rgb(102 103 105); font-size: 14px; padding: 0 20px; border-radius: 10px;display: inline-block">
                  变量格式（默认为$[page]-$[part]）：<br>$[page]：集数<span v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"/>$[part]：分集名称<span v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"/>$[title]：视频名称
                </div>
              </div>
            </el-form-item>
            <el-form-item label="磁盘保护">
              <el-row>
                <el-col :span="10">
                  <el-input-number v-model="form.diskProtect" />
                </el-col>
              </el-row>
              <div style="margin-top: 5px; ">
                <span style="background: rgb(237 237 237 / 72%); color: rgb(102 103 105); font-size: 14px; padding: 10px 20px; border-radius: 10px">
                  单位是G，当电脑的空间小于该值的时候，将无法进行转换
                </span>
              </div>
            </el-form-item>
            <el-form-item label="仅提取音频">
              <el-switch v-model="form.onlyAudio">启用后将不处理视频文件</el-switch>
            </el-form-item>
            <el-form-item label="视频输出格式">
              <el-select v-model="form.outputVideoFormat" placeholder="avi" :disabled="form.onlyAudio">
                <el-option label="mp4" value="mp4" />
                <el-option label="avi" value="avi" />
                <el-option label="mkv" value="mkv" />
                <el-option label="mov" value="mov" />
              </el-select>
            </el-form-item>
            <el-form-item label="音频输出格式">
              <el-select v-model="form.outputAudioFormat" placeholder="mp3" :disabled="!form.onlyAudio">
                <el-option label="mp3" value="mp3" />
                <el-option label="aac" value="aac" />
                <el-option label="wav" value="wav" />
                <el-option label="flac" value="flac" />
                <el-option label="ogg" value="ogg" />
                <el-option label="wma" value="wma" />
              </el-select>
            </el-form-item>
            <el-form-item label="是否覆盖保存">
              <el-checkbox v-model="form.overrideOutput" size="medium">启用后会覆盖之前转换成功的视频</el-checkbox>
            </el-form-item>
            <el-form-item label="是否清除源文件">
              <el-checkbox v-model="form.sourceClearFlag" size="medium">转换完成后删除缓存的源文件</el-checkbox>
            </el-form-item>
            <el-form-item label="视频码率压缩">
              <el-row>
                <el-col :span="18">
                  <el-slider v-model="form.bitrate" :show-input="true" />
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存</el-button>
              <el-button @click="onCancel">恢复</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>


  </div>
</template>

<script>
export default {
  name: "Setting",
  data() {
    return {
      form: {
        sourcePath: '',
        targetPath: '',
        outputNameFormat: '$[page]-$[part]',
        diskProtect: 0,
        onlyAudio: false,
        outputVideoFormat: 'avi',
        outputAudioFormat: 'mp3',
        overrideOutput: false,
        sourceClearFlag: false,
        bitrate: 100,
      }
    }
  },
  methods: {
    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
.liu-leave-active {
  transition: opacity .5s;
}
.liu-leave-to {
  opacity: 0;
}
.el-form-item {
  margin-bottom: 15px
}
</style>

